<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html >
<head>
    <meta charset="UTF-8">
    <title>Contest Problem - Online Judge</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" th:href="@{/css/styles.css}" >
    <link rel="stylesheet" th:href="@{/js/editormd/css/editormd.css}" />
    <link rel="stylesheet" th:href="@{/js/editormd/css/editormd.preview.css}" />
    <script th:src="@{/js/jquery-1.7.2.js}"></script>
    <script th:src="@{/js/gdoj.js}"></script>
    <script type='text/javascript' th:src="@{/js/editormd/lib/marked.min.js}"></script>
    <script type='text/javascript' th:src="@{/js/editormd/lib/prettify.min.js}"></script>
    <script type='text/javascript' th:src="@{/js/editormd/editormd.min.js}"></script>
    <script type='text/javascript' th:src='@{/js/editor-md.js}'></script>
</head>
<style>
    .headerNav {width:100%!important; margin:0px auto; height:40px;font-size:16px;}
    body, html {margin:0!important; height:100%!important; overflow-x:hidden!important;overflow-y:hidden!important}
</style>
<body>
<div th:replace="common::web-navbar"></div>
<div id="problem-box">
        <div id="problem-box-left" >
            <div id="problem-box-nav" class="problem-second-nav">
                <div class="hleft">
                    <div class="nav_menu">
                        <a class="" th:href="@{/contest/{contestId}(contestId=${contestProblem.contest_id})}">
                            <svg viewBox="0 0 1024 1024" p-id="23014" width="14" height="14"><path d="M836.9 63.5H164.84c-24.73 0-44.77 20.05-44.77 44.77v806.45c0 24.73 20.05 44.77 44.77 44.77H836.9c24.73 0 44.77-20.04 44.77-44.77V108.28c0-24.73-20.05-44.78-44.77-44.78z m-560.03 672c-18.56 0-33.6-15.04-33.6-33.6 0-18.56 15.04-33.6 33.6-33.6 18.56 0 33.6 15.04 33.6 33.6 0 18.56-15.04 33.6-33.6 33.6z m0-179.2c-18.56 0-33.6-15.04-33.6-33.6 0-18.56 15.04-33.6 33.6-33.6 18.56 0 33.6 15.04 33.6 33.6 0 18.56-15.04 33.6-33.6 33.6z m0-201.6c-18.56 0-33.6-15.04-33.6-33.6 0-18.56 15.04-33.6 33.6-33.6 18.56 0 33.6 15.04 33.6 33.6 0 18.56-15.04 33.6-33.6 33.6z m481.6 380.8h-358.4c-12.37 0-22.4-10.02-22.4-22.4 0-12.38 10.03-22.4 22.4-22.4h358.4c12.37 0 22.4 10.02 22.4 22.4 0 12.38-10.03 22.4-22.4 22.4z m0-201.6h-358.4c-12.37 0-22.4-10.02-22.4-22.4 0-12.38 10.03-22.4 22.4-22.4h358.4c12.37 0 22.4 10.02 22.4 22.4 0 12.38-10.03 22.4-22.4 22.4z m0-201.6h-358.4c-12.37 0-22.4-10.02-22.4-22.4 0-12.38 10.03-22.4 22.4-22.4h358.4c12.37 0 22.4 10.02 22.4 22.4 0 12.38-10.03 22.4-22.4 22.4z" fill="#66c4f6" p-id="23015"></path></svg>
                            [[#{contestproblems}]]
                        </a>
                    </div>
                    <div id="problem-box-nav-content" class="nav_menu current">
                        <span><svg viewBox="0 0 1024 1024" p-id="14655" width="14" height="14"><path d="M699.970832 284.404258c-33.864006 0.585123-61.94992-24.867737-62.900745-56.903233V35.873173a15.871467 15.871467 0 0 1 10.385937-13.823536 16.822292 16.822292 0 0 1 17.553696 3.291318l257.746776 233.683583a14.042957 14.042957 0 0 1 3.364459 16.31031 15.798327 15.798327 0 0 1-14.993783 8.923129H699.970832v0.146281z m0 56.830092h217.885257c8.557427-0.146281 16.822292 2.925616 22.892946 8.338006a29.987565 29.987565 0 0 1 9.873954 21.210716v538.386497a113.367623 113.367623 0 0 1-37.667307 81.478408 126.532895 126.532895 0 0 1-87.549061 32.401198H198.520238a126.825457 126.825457 0 0 1-87.549061-32.401198 113.367623 113.367623 0 0 1-37.667306-81.478408V113.913981A113.367623 113.367623 0 0 1 110.971177 32.435574 126.532895 126.532895 0 0 1 198.520238 0.107516h342.516501c18.2851-0.292562 33.352023 13.384694 33.644585 30.645829v196.6014c1.535948 64.363554 57.561496 115.196133 125.216368 113.879605zM261.274703 852.85146h501.377454a30.206986 30.206986 0 0 0 31.450372-28.524757 30.206986 30.206986 0 0 0-31.450372-28.451616H261.347843a30.206986 30.206986 0 0 0-31.450372 28.524757c0.438842 16.017748 14.4818 28.744178 31.450372 28.451616z m0-170.782838h501.377454a32.108636 32.108636 0 0 0 21.94212-8.045444 28.159055 28.159055 0 0 0 9.508252-20.479313 29.841284 29.841284 0 0 0-31.450372-28.159054H261.347843a29.841284 29.841284 0 0 0-31.450372 28.232195 28.159055 28.159055 0 0 0 9.508252 20.333031 31.816075 31.816075 0 0 0 21.94212 8.045445z m0-170.417136H574.900745a30.206986 30.206986 0 0 0 31.450373-28.378476 30.206986 30.206986 0 0 0-31.450373-28.524757H261.347843a30.206986 30.206986 0 0 0-31.450372 28.524757c0.438842 16.017748 14.4818 28.744178 31.450372 28.451616z" fill="#7FA5FF" p-id="14656"></path></svg>
                            [[#{problem.description}]]
                        </span>
                    </div>
                    <div id="problem-box-nav-editorial" class="nav_menu" style="display: none"></div>
                    <div id="problem-box-nav-status" class="nav_menu" th:if="${session.session_username != null}">
                        <span class="problem-box-nav-status" >
                            <svg viewBox="0 0 1024 1024" p-id="23675" width="14" height="14"><path d="M849.170732 0c97.404878 0 174.829268 77.42439 174.829268 174.829268v674.341464c0 97.404878-77.42439 174.829268-174.829268 174.829268H174.829268c-97.404878 0-174.829268-77.42439-174.829268-174.829268V174.829268c0-97.404878 77.42439-174.829268 174.829268-174.829268h674.341464zM499.512195 252.253659C349.658537 252.253659 227.278049 374.634146 227.278049 524.487805S349.658537 796.721951 499.512195 796.721951c137.365854 0 252.253659-102.4 269.736585-239.765853l-62.439024-7.492683v4.995122c-14.985366 102.4-102.4 177.326829-204.8 177.326829-114.887805 0-207.297561-92.409756-207.297561-207.297561s92.409756-207.297561 207.297561-207.297561c59.941463 0 117.385366 27.473171 157.346342 72.429268L621.892683 424.585366l147.356097 34.965854-34.965853-147.356098-32.468293 32.468293c-49.95122-57.443902-124.878049-92.409756-202.302439-92.409756z m32.468293 127.375609h-64.936586v177.32683l127.37561 72.429268 32.468293-54.946342-94.907317-54.946341v-139.863415z" fill="#66c4f6" p-id="23676"></path></svg>
                            [[#{problem.mysubmit}]]
                        </span>
                    </div>
                    <div class="nav_menu">
                        <a th:href="@{/contest/{contestId}/standings(contestId=${contestProblem.contest_id})}" target="blank">
                            <svg viewBox="0 0 1024 1024" p-id="2735" width="14" height="14"><path d="M1024 824c0 110-90 200-200 200H200C90 1024 0 934 0 824V200C0 90 90 0 200 0h624c110 0 200 90 200 200v624z" fill="#44A7DF" p-id="2736"></path><path d="M782.1 758.8h-18.175V542.425c0-20.388-16.313-36.188-36.412-36.188h-71.469c-20.463 0-36.444 16.2-36.444 36.188V758.8h-36.074V253.931c0-20.131-16.313-36.331-36.406-36.331h-71.513c-20.419 0-36.406 16.272-36.406 36.331V758.8h-36.075V397.856c0-19.881-16.313-35.938-36.406-35.938h-71.513c-20.418 0-36.406 16.094-36.406 35.938V758.8h-18.175c-9.75 0-17.9 8.075-17.9 18.038 0 9.668 8.012 18.037 17.9 18.037h541.45c9.774 0 17.925-8.081 17.925-18.037-0.001-9.669-8.014-18.038-17.901-18.038z m0 0" fill="#FFFFFF" p-id="2737"></path></svg>
                            [[#{problem.contest_standings}]]
                        </a>
                    </div>
                </div>
                <div class="hright">
                    <div class="nav_menu">
                        <span class="ide-menu-item problem-info-close" th:title="#{ide.fold_left}">
                            <img class="ide-menu-img" src="/img/left.png" />
                        </span>
                    </div>
                </div>
            </div>
            <div id="problem-content" class="problem-content small-scrollbar">
                <div id="problem-status" class="problem-status">
                    <div class="" style="">
                        <div class="roundbox-title ">
                            <div class="left"><span th:text="${contestProblem.num}+'.'+${contestProblem.title}"></span></div>
                            <div class="right">
                                <span><a style="margin-right: 6px;font-weight: normal;font-size:12px;color:grey;text-decoration:none;"
                                         th:href="'/contest/' + ${contestProblem.contest_id} + '/status/problem/' + ${contestProblem.num} + '/page/1'">
                                    [[#{problem.all_submit}]]</a>
                                </span>
                            </div>
                        </div>
                        <div class="" style="">
                            <table class="status">
                                <tr class="header">
                                    <th  class="verdict left-item">[[#{status}]]</th>
                                    <th  class="time">[[#{timeuse}]]</th>
                                    <th  class="memory">[[#{memoryuse}]]</th>
                                    <th  class="language">[[#{language}]]</th>
                                    <th  class="date">[[#{submitdate}]]</th>
                                </tr>
                            </table>
                        </div>
                        <div id="problem-status-loader" class="problem-status-loader"><img th:src='@{/img/loader.gif}'></div>
                    </div>
                </div>
                <div id="problem-information" class="problem-information">
                    <div class="data-title">
                        <h3 th:text="${contestProblem.num}+'.'+${contestProblem.title}"></h3>
                        <span th:text="#{problem.time_limit} + ':' + ${problem.time_limit} + 'MS&nbsp;&nbsp;' + #{problem.memory_limit} + ':' + ${problem.memory_limit} + 'KB'"></span>
                        <br/>
                    </div>
                    <div class="probleminfo" style="padding:0px 12px 12px 0px;">
                        <h5 th:text="#{problem.description}">:</h5>
                        <div class="content markdown-view" id="problem-description-markdown-view">
                            <textarea style="display:none;" th:utext="${problem.description}"></textarea>
                        </div>
                        <h5 th:text="#{problem.input}">:</h5>
                        <div class="content markdown-view" id="problem-input-markdown-view">
                            <textarea style="display:none;" th:utext="${problem.input}"></textarea>
                        </div>
                        <h5 th:text="#{problem.output}">:</h5>
                        <div class="content markdown-view" id="problem-output-markdown-view">
                            <textarea style="display:none;" th:utext="${problem.output}"></textarea>
                        </div>
                        <h5 th:text="#{problem.sample_test}">:</h5>
                        <div class="sample-test">
                            <div class="input"><div class="title">[[#{problem.sample_input}]]</div>
                                <div class="sample-input"><pre th:utext="${problem.sample_input}"></pre></div>
                            </div>
                            <div class="output"><div class="title">[[#{problem.sample_output}]]</div>
                                <div class="sample-output"><pre th:utext="${problem.sample_output}"></pre></div>
                            </div>
                        </div>
                        <h5 th:text="#{problem.note}">:</h5>
                        <div class="content markdown-view" id="problem-hint-markdown-view">
                            <textarea style="display:none;" th:utext="${problem.hint}"></textarea>
                        </div>
                    </div>
                </div>
                <div id="problem-editorial" class="problem-editorial"></div>
            </div>
            <div id="bottom-bar-left">
                <div class="bottom_button"></div>
            </div>
        </div>
        <div id="problem-drag-bar" class="gutter gutter-horizontal"></div>
        <div id="problem-box-right">
            <div id="ide-box-nav" class="ide-second-nav">
                <div class="ide-box-nav-left">
                    <input type="hidden" id="username" name="username" th:value="${session.session_username}"/>
                    <input type="hidden" id="contestId" name="contestId" th:value="${contestProblem.contest_id}"/>
                    <input type="hidden" id="problemId" name="problemId" th:value="${contestProblem.num}">
                    <div>
                        <select class="lang-choice" id="select_lang" name="language" th:if="${languages==null}">
                            <option value="1" >MS C++</option>
                            <option value="2" >MS C</option>
                            <option value="3" >GNU C++</option>
                            <option value="4" >GNU C</option>
                            <option value="5" >Java</option>
                            <option value="8" >Pascal</option>
                        </select>
                        <select class="lang-choice" id="select_lang" name="language" th:if="${languages!=null}">
                            <option th:each="language,stat : ${languages}"
                                th:value="${language.id}"
                                th:text="${language.language_name}">
                        </select>
                    </div>
                </div>
                <div class="ide-box-nav-right">
                    <span class="ide-menu-item load-default-template" th:title="#{ide.reset_default_code_template}">
                        <img class="ide-menu-img" src="/img/default_code.png" />
                    </span>
                    <span class="ide-menu-item ide-setting " th:title="#{ide.setting}">
                        <img class="ide-menu-img" src="/img/ide_setting.png" />
                    </span>
                    <span class="ide-menu-item source-box-close" th:title="#{ide.fold_right}">
                        <img class="ide-menu-img" src="/img/right.png" />
                    </span>
                </div>
            </div>
            <div id="ide-box" class="ide-box">
                <div id="source" class="source-box"></div>
                <div id="test-box">
                    <div id="test-box-nav">
                        <div id="test-nav-tab-input" class="test-box-nav-tab test-box-nav-tab-cur">[[#{problem.testbox.input}]]</div>
                        <div id="test-nav-tab-output" class="test-box-nav-tab">[[#{problem.testbox.output}]]</div>
                    </div>
                    <table class="test-box-tb">
                        <tr id="test-box-tb-input" >
                            <td><textarea id="input" class="test-box-input small-scrollbar" name="input" rows="10">[[${problem.sample_input}]]</textarea></td>
                        </tr>
                        <tr id="test-box-tb-output" style="display:none">
                            <td>
                                <span id="output-status" class="test-box-output-status" th:text="#{problem.testbox.running_code}"></span><br>
                                <textarea id="output" class="test-box-output small-scrollbar" name="output" rows="10"readonly="readonly"></textarea></td>
                        </tr>
                    </table>
                </div>
            </div>
            <div id="bottom-bar-right">
                <div id="consoleMenu" class="console-menu">[[#{problem.console}]]<span id="consoleCaert" class="caret-down"></span></div>
                <div class="bottom_button">
                    <input id="runsolution" class="run-solution button_submit" type="submit" th:value="#{submit.run}"/>
                    <input id="submitsolution" class="submit-solution button_submit" type="submit" th:value="#{submit.submit}"/>
                </div>
            </div>
        </div>
</div>
<script th:src="@{/js/monaco-editor/min/vs/loader.js}"></script>
<script type="text/javascript" th:inline="javascript" th:src="@{/js/submit.js}"></script>
<div th:include="problem/ide-setting"></div>
<div th:include="problem/status-pop"></div>
</body>
</html>
